<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js 表单验证</title>
	
	<script src="dist/jquery.min.js"></script>
	<script src="dist/JForm.min.js"></script>
</head>

<body>

	<div>
		<form id="test-form" action="#" autocomplete="off">

			<p>用户名： <input cname="用户名" type="text" max-length="20" min-length="4" value="xiaoyang" required></p>
			<p>时间： <input cname="时间" type="text" dtype="time" value="20:09" required></p>
			<p>邮箱： <input cname="邮箱" type="text" dtype="email" value="906388446@qq.com" required></p>
			<p>密码： <input type="text" value="123asdsa456" handler="checkPass(value, ele)" required></p>
			<p>身份证： <input cname="身份证" type="text" dtype="idnum" value="420115197404166817" required></p>
			<p>编号： <input cname="编号" type="text" dtype="number" value="30" range="30-50" required></p>
			<p>域名： <input cname="域名" type="text" dtype="domain" value="www.baidu.com" required></p>
			<p>手机： <input cname="手机" type="text" dtype="mobile" value="18575676684" message="请输入正确的手机号码" required></p>
			<p>中文姓名： <input cname="中文姓名" type="text" dtype="cn" value="张三" message="您输入的含有非中文字符" required></p>
			<p>机构代码： <input cname="机构代码" type="text" dtype="en" value="T001" message="机构代码只能是数组和英文" required></p>
			<p>爱好：
				<input cname="爱好" name="prefer[]" type="checkbox" value="001" max-check="3" min-check="2" required>
				<input type="checkbox" name="prefer[]" value="002">
				<input type="checkbox" name="prefer[]" value="003">
				<input type="checkbox" name="prefer[]" value="004">
			</p>

			<p>注册年份： <input type="text" handler="timeCheck(value, ele)" value="2010" required></p>

			<p><a onclick="checkForm()">提交表单</a></p>

		</form>
	</div>

	<script>

		var __form = new JForm({
			formId : "test-form",
			showMessage : function( type, message, ele ) { //错误处理接口
				ele.focus();
				alert(message);
			}
		});

		//设置报错提示信心
		__form.setMessage({
			empty : "请填写{cname}.",
			email : "请输入合法的电子邮件地址.",
			idnum : "请输入合法的身份证号码.",
			number : "请输入有效的数字."
		});

		//添加正则表达式
		__form.addRegExp("time", /^[1|2][0-9]:([0-5][0-9])$/);

		function checkForm() {

			if ( __form.checkFormData() ) {
				alert("表单验证成功！")
			}
		}

		//验证密码
		function checkPass(value, ele) {

			if ( __form.getPassRank(value) <= 1 ) {
				alert("您输入的密码太弱， 密码至少要包含数字和字母，请重新输入！");
				ele.focus();
				return false;
			}
			return true;

		}

		//验证时间
		function timeCheck(value, ele) {

			if ( value < 1970 ) {
				alert("年份必需大于1970.");
				ele.focus();
				return false;
			}
			if ( value > new Date().getFullYear() ) {
				alert("请输入今年之前的年份.");
				ele.focus();
				return false;
			}
			return true;
		}

	</script>
</body>
</html>
